<script setup lang="ts">
defineOptions({
  name: "equipItem"
});

import { ref, computed, nextTick, getCurrentInstance } from "vue";
import ReTextTooltip from "@/components/ReTextTooltip";
import { formatChemicalEquipBackgroundImageUrl } from "../../hooks";
import curve from "../../components/curve.vue";

const { proxy }: any = getCurrentInstance();
const props = withDefaults(defineProps<{ data: Record<string, any> | null; height: number }>(), { data: null, height: null });

const dialogVisible = ref<boolean>(false);
const pointCode = ref<string>("");
const groupCode = ref<string>("");
const deviceCode = ref<string>("");
const unit = ref<string>("");

const percent = computed(() => {
  if (props.data?.list[0]?.capacity === 0) {
    return 0;
  } else {
    if (props.data?.list[0]?.fullCapacity) {
      return Number((props.data?.list[0]?.capacity * 100) / props.data?.list[0]?.fullCapacity);
    } else {
      return null;
    }
  }
});

const backgroundImage = computed(() => {
  const url = `/ifp-web-static/image/gas/statusVisual/chemicalEquip/${formatChemicalEquipBackgroundImageUrl(percent.value)}.png`;
  return `url(${proxy.useGetStaticUrl(url)})`;
});

const checkCurveHandler = async (data: Record<string, any>) => {
  pointCode.value = data?.pointCode;
  groupCode.value = data?.groupCode;
  deviceCode.value = data?.deviceCode;
  unit.value = data?.unit;
  await nextTick();
  dialogVisible.value = true;
};
</script>

<template>
  <div class="equip-item">
    <div class="equip-item-label">
      <ReTextTooltip :content="`${data?.deviceCode}${data?.list[0]?.fullCapacity ? '（' + data?.list[0]?.fullCapacity + 'L）' : ''}`" />
    </div>
    <div class="equip-item-visual" :style="{ backgroundImage }" @click="checkCurveHandler(data?.list[0])">
      <div class="visual-liquid-percent">
        <!-- <div class="percent-text">{{ `${percent?.toFixed(2) ?? "--"}%` }}</div> -->
      </div>
      <div class="visual-liquid-level">
        <div class="visual-liquid-level-item">液位</div>
        <div class="visual-liquid-level-item visual-liquid-level-value">
          <ReTextTooltip :content="`${data?.list[0]?.capacity ?? '-'}L`" />
        </div>
      </div>
      <div class="visual-liquid-reserve" />
    </div>
    <div class="equip-item-msg">
      <!-- <div class="msg-label">历史更换时间：</div>
      <div class="msg-value margin">
        <px-scrollbar v-if="data?.historyTime?.length" height="42px" width="100%">
          <ReTextTooltip v-for="item in data?.historyTime" :key="item.date" :content="`${item?.date} 载送数量：${item?.num || '--'}`" />
        </px-scrollbar>
        <div v-else style="height: 42px">--</div>
      </div>
      <div class="msg-label">预计下次更换时间：</div>
      <div class="msg-value red">
        <ReTextTooltip :content="data?.nextTime" />
      </div> -->
    </div>
    <curve
      v-if="dialogVisible"
      v-model="dialogVisible"
      title="液位"
      :scale="0"
      :unit="unit"
      :pointCode="pointCode"
      :groupCode="groupCode"
      :deviceCode="deviceCode"
    />
  </div>
</template>

<style lang="scss" scoped>
.equip-item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 12px 20px;

  .equip-item-label {
    width: 100%;
    height: 18px;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-align: center;
  }

  .equip-item-status {
    width: 100%;
    height: 24px;

    .status-common {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }

    .equip-item-status-bottle {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;

      .status-bottle-left {
        flex: 1;
        height: 100%;
      }

      .status-bottle-right {
        flex: 1;
        height: 100%;
      }
    }

    .equip-item-status-device {
      width: 100%;
      height: 100%;
    }
  }

  .equip-item-visual {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }

    .visual-liquid-percent {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 40px;
      height: 100%;

      .percent-text {
        font-size: 12px;
        color: #333;
      }
    }

    .visual-liquid-reserve {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 40px;
      height: 40px;
    }

    .visual-liquid-level {
      width: 34%;
      margin-bottom: 10px;
      overflow: hidden;
      background-color: #4c5069;
      // border: 2px solid #999;
      border-radius: 6px;

      .visual-liquid-level-item {
        box-sizing: border-box;
        width: 100%;
        height: 22px;
        padding: 0 4px;
        font-size: 12px;
        line-height: 22px;
        color: #fff;
        text-align: center;
        letter-spacing: 2px;
        white-space: no-repeat;
        border-radius: 6px 6px 0 0;
      }

      .visual-liquid-level-value {
        background-color: #4085ec;
      }
    }
  }

  .equip-item-msg {
    width: 100%;

    .msg-label {
      width: 100%;
      font-size: 13px;
      line-height: 1.6;
      color: #888;
      white-space: nowrap;
    }

    .msg-value {
      width: 100%;
      font-size: 13px;
      line-height: 1.6;
      color: #222;
      white-space: nowrap;

      :deep(.px-scrollbar__view) {
        gap: 0;
      }
    }

    .margin {
      margin-bottom: 4px;
    }

    .red {
      color: #ef4444;
    }
  }
}
</style>
